.header{
    background: #C20C0C;
    padding: 0.6rem;
    .nav{
        display: flex;
        li{
            flex: 1;
            i{
                font-size: 1rem;
                color: #fff;
                line-height: 1.5rem;
            }
        }
        li>span.active{
            i{
                color: #c1c1c1;
            }
        }
        li.nav-link{
            flex: 10;
            display: flex;
            span{
                flex: 1;
                text-align: center;
            }
            .search-box{
                width: 100%;
                position: relative ;
                input{
                    width: 100%;
                    outline: none ;
                    border-radius: 1.6rem;
                    border: 0px solid transparent ;
                    height: 1.5rem;
                    width: 100%;
                    text-indent: 3em;
                    color: #BCBCBC ;
                }
                .iconfont{
                    color: #BCBCBC;
                    font-size: 1rem;
                    position: absolute;
                    left: 10px;
                    top:5px;
                }
            }
        }
        li.search{
            text-align: right;
        }
    }
}
.right-slider-box{
    position: fixed;
    left: 0;
    bottom: 0;
    top:0;
    right: 0;
    background: transparent;
    z-index: 2;
}
.right-slider{
    width: 10rem;
    position: fixed;
    left: 0;
    transform: translateX(0);
    bottom: 0;
    top:0;
    background: #EBECEC;
    z-index: 3;
    transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.right-slider.active{
    transform: translateX(0);
}
.right-slider.active.leave{
    transform: translateX(-100%);
}

.user-info{
    width: 100%;
    height: 7rem;
    background: url('././../images/bg.jpg') no-repeat ;
    background-size:cover ; 
}
.search-content{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 222;

    .search-header{
        padding: 0.5rem 0.7rem;
        background: #C20C0C;
        display: flex;
        .search-box{
            flex: 6;
            position: relative;
            .iconfont{
                color: #BCBCBC;
                font-size: 1rem;
                position: absolute;
                left: 10px;
                top:5px;
            }
        }
        .search-close-bar{
            flex: 1;
            line-height: 1.5rem;
            color: #fff;
            font-size: 0.8rem;
            text-align: center;
        }
        .search-input{
            outline: none ;
            border-radius: 1.6rem;
            border: 0px solid transparent ;
            height: 1.5rem;
            width: 100%;
            text-indent: 3em;
            color: #BCBCBC ;
        }
    }

}
.icon{
    font-size: 2rem;
}
#container{
    width: 18.75rem;
    height: 20rem;
}
